<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frame Browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font: 12px/1.2 sans-serif;
}

div.frame-browser {
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 50%;
}

div.frame-browser div.frame {
	background: #fff;
	border: #aaa solid 1px;
	border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	clear: both;
	line-height: 1.2;
	margin: 20px auto;
	padding: 5px;
	width: 200px;
}

div.frame-browser div.frame span.author {
    display: block;
}

div.frame-browser div.frame span.score {
	color: #777;
	float: right;
	font-size: 24px;
}

div.frame-browser div.frame span.score.bad {
    color: #955;
}

div.frame-browser div.frame span.score.good {
    color: #795;
}

div.frame-browser div.frame strong {
	font-size: 18px;
	font-weight: normal;
}

div.frame-browser div.fx1,
div.frame-browser div.fx2
{
	background-repeat: repeat-y;
	height: 100%;
	position: absolute;
	top: 0;
	width: 50px;
}

div.frame-browser div.fx1 {
	background-image: url(fade2l.png);
	left: 0;
}

div.frame-browser div.fx2 {
	background-image: url(fade2r.png);
	right: 0;
}

div.frame-browser ul.command-list {
	border: #444 solid 0;
	line-height: 1.5;
	list-style: none;
	overflow: auto;
	width: 5000px;
}

div.frame-browser ul.command-list li {
	background-repeat: no-repeat;
	float: left;
	padding: 18px 2px;
	position: relative;
}


div.frame-browser ul.command-list li a.command {
	background: #8a6;
	border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	color: #fff;
	display: block;
	font-size: 18px;
	padding: 0 6px;
	text-decoration: none;
}

div.frame-browser ul.command-list li a.command:hover {
	background: #452;
}

div.frame-browser ul.command-list li div.frame {
	clear: none;
	display: none;
	left: 50%;
	margin: 0 0 0 -106px;
	position: absolute;
	top: 50px;
}

div.frame-browser ul.command-list li.hover div.frame {
    display: block;
}

div.frame-browser ul.command-list li.no-frame a {
	background: #888;
}

div.frame-browser ul.command-list li.no-frame a:hover {
	background: #444;
}

div.frame-browser ul.command-list-destination {
	border-top-width: 5px;
	padding-bottom: 50px;
}

div.frame-browser ul.command-list-destination li {
	background-image: url(cap-d.gif);
	background-position: 50% 0;
}

div.frame-browser ul.command-list-source {
	border-bottom-width: 5px;
}

div.frame-browser ul.command-list-source li {
	background-image: url(cap-u.gif);
	background-position: 50% 100%;
}
</style>
</head>
<body>

<div class="frame-browser">

<ul class="command-list command-list-source">
  <li><a class="command" href="#">go west</a></li>
  <li><a class="command" href="#">go north</a></li>
  <li><a class="command" href="#">do something</a></li>
  <li><a class="command" href="#">say hello world</a></li>
  <li><a class="command" href="#">jump down</a></li>
  <li><a class="command" href="#">go west</a></li>
  <li><a class="command" href="#">go north</a></li>
  <li><a class="command" href="#">do something</a></li>
  <li><a class="command" href="#">say hello world</a></li>
  <li><a class="command" href="#">jump down</a></li>
  <li><a class="command" href="#">go west</a></li>
  <li><a class="command" href="#">go north</a></li>
  <li><a class="command" href="#">do something</a></li>
  <li><a class="command" href="#">say hello world</a></li>
  <li><a class="command" href="#">jump down</a></li>
  <li><a class="command" href="#">go west</a></li>
  <li><a class="command" href="#">go north</a></li>
  <li><a class="command" href="#">do something</a></li>
  <li><a class="command" href="#">say hello world</a></li>
  <li><a class="command" href="#">jump down</a></li>
</ul>

<div class="frame">
  <p>
    <span class="score good">12</span>
    <strong>The Beginning</strong>
    <span class="author">by <a href="#">Blixt</a></span>
  </p>
</div>

<ul class="command-list command-list-destination">
  <li><a class="command" href="#">go west</a><div class="frame"><p><span class="score average">5</span> <strong>Some Frame</strong> <span class="author">by <a href="#">Blixt</a></span></p></div></li>
  <li><a class="command" href="#">go north</a><div class="frame"><p><span class="score average">5</span> <strong>Some Frame</strong> <span class="author">by <a href="#">Blixt</a></span></p></div></li>
  <li class="no-frame"><a class="command" href="#">do something</a></li>
  <li class="hover"><a class="command" href="#">say hello world</a><div class="frame"><p><span class="score average">5</span> <strong>Some Frame</strong> <span class="author">by <a href="#">Blixt</a></span></p></div></li>
  <li><a class="command" href="#">jump down</a><div class="frame"><p><span class="score average">5</span> <strong>Some Frame</strong> <span class="author">by <a href="#">Blixt</a></span></p></div></li>
</ul>

<div class="fx1"></div>
<div class="fx2"></div>

</div>

</body>
</html>
